<template>
  <div>
    <div class="map">
      <el-main class="slideshow">
        <div>
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in imagesbox" :key="item.id">
              <img :src="item.idView" class="image" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-main>
      <p class="type">手机</p>
      <el-container>
        <!-- 商品推荐 -->
        <el-aside class="recommend">
          <el-image
            style="width: 299px; height: 646px;"
            :src="url"
            :fit="fit"
          ></el-image>
        </el-aside>
        <el-row class="form">
          <el-col class="one">
            <a href="/particulars" id="one">
              <img
                src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
                alt=""
              />
              <h2 class="name">Redmi K30</h2>
              <h3 class="describe">120hz流速屏，全速热爱</h3>
              <p class="money"><el-link type="warning">1599</el-link></p>
            </a>
          </el-col>

          <el-col class="two">
            <img
              src="http://106.15.179.105:3000/public/imgs/appliance/AirCondition-F3W1.png"
              alt=""
            />
            <h2 class="name">变频空调</h2>
            <h3 class="describe">静音制冷，解暑神器</h3>
            <p class="money"><el-link type="warning">2699</el-link></p>
          </el-col>

          <el-col class="three">
            <img
              src="http://106.15.179.105:3000/public/imgs/appliance/Washer-Pro-10.png"
              alt=""
            />
            <h2 class="name">全自动互联网洗衣机</h2>
            <h3 class="describe">智能洗烘一体，省心更省力</h3>
            <p class="money"><el-link type="warning">2999</el-link></p>
          </el-col>

          <el-col class="four">
            <img
              src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-E55A.png"
              alt=""
            />
            <h2 class="name">全面屏电视</h2>
            <h3 class="describe">全面屏设计，人工智能语音</h3>
            <p class="money"><el-link type="warning">1599</el-link></p>
          </el-col>

          <el-col class="five">
            <img
              src="http://106.15.179.105:3000/public/imgs/phone/Redmi-8A.png"
              alt=""
            />
            <h2 class="name">Redmi 8A</h2>
            <h3 class="describe">超长续航，性价比之王</h3>
            <p class="money"><el-link type="warning">599</el-link></p>
          </el-col>

          <el-col class="six">
            <img
              src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
              alt=""
            />
            <h2 class="name">Redmi K30</h2>
            <h3 class="describe">120hz流速屏，全速热爱</h3>
            <p class="money"><el-link type="warning">1599</el-link></p>
          </el-col>

          <el-col class="seven">
            <img
              src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
              alt=""
            />
            <h2 class="name">Redmi K30</h2>
            <h3 class="describe">120hz流速屏，全速热爱</h3>
            <p class="money"><el-link type="warning">1599</el-link></p>
          </el-col>

          <el-col class="eight" style="border: none;">
            <a href="/AllShopping">点击浏览更多>></a>
          </el-col>
        </el-row>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imagesbox: [
        { id: 0, idView: require('@/assets/1.jpeg') },
        { id: 1, idView: require('@/assets/2.jpeg') },
        { id: 2, idView: require('@/assets/3.jpeg') },
        { id: 3, idView: require('@/assets/4.jpeg') },
        { id: 4, idView: require('@/assets/5.jpeg') },
      ],
      fits: ['fill'],
      url: 'http://106.15.179.105:3000/public/imgs/phone/phone.png',
    }
  },
  methods: {
    setSize() {
      // 通过浏览器宽度（图片宽度）计算高度
      this.bannerHeigth = (400 / 1920) * this.screenwith
    },
  },
}
</script>
<style>
.type {
  font-size: 25px;
  margin-left: 52px;
  color: rgba(5, 13, 90, 0.616);
}
.all {
  margin: 0px !important;
  padding: 0px !important;
  list-style: none !important;
  text-decoration: none !important;
  height: 100% !important;
}
.head {
  width: 100vw !important;
}

.image {
  margin-top: auto;
}
.el-image__error,
.el-image__placeholder {
  width: 100%;
  height: 100%;
}
.recommend {
  background-color: #99a9bf;
  width: 250px;
  height: 650px;
  margin-left: 55px;
  margin-top: 10px;
}
.form img {
  width: 210px !important;
  border: none !important;
}
.form :hover {
  border: 0.9px solid #868484;
}
#one {
  border: none;
}
.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight {
  width: 220px !important;
  height: 320px;
  margin-left: 13px;
  margin-top: 10px;
}

.name {
  font-size: 16px;
  border: none !important;
}
.name,
.describe {
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: none !important;
}
.describe {
  margin: 5px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
  border: none !important;
}
.money {
  margin: 10px 10px 10px;
  text-align: center;
  border: none !important;
}
.money a {
  border: none !important;
}
.money .el-link {
  font-size: 20px;
}
.money a :hover {
  border: none !important;
}

.eight {
  text-align: center;
  line-height: 280px;
}
.eight a {
  border: none !important;
}
.el-col {
  border: 0.9px solid #f0f0f0;
}
</style>
